<!-- 重做，一次请求6个就可以了 -->
<template>
	<view class="p-2 animated fast fadeIn">
		<view class="flex align-center justify-between">
			<view class="flex align-center">
				<image :src="item.userpic" @click="openuserspace" class="mr-2" style="width: 65rpx; height: 65rpx" lazy-load></image>
				<view class="flex flex-column justify-around">
					<view class="text">{{ item.nikeName }}</view>
					<text class="text text-light-muted">{{ item.createTime | timeformat }}</text>
				</view>
			</view>
			<template v-if="item.userId === userId"></template>
			<template v-else>
				<view class="button text animated" hover-class="jello" v-if="item.isFollow === 0" @click="follow(0)">关注</view>
				<view class="text bg-light text-dark px-2" v-else-if="item.isFollow === 1" @click="follow(1)">已关注</view>
				<view class="text bg-hover-warning text-dark px-2" v-else-if="item.isFollow === 2" @click="follow(2)">互关</view>
				<view class="text bg-hover-info text-dark px-2" style="color: aliceblue" v-else-if="item.isFollow === 3" @click="follow(3)">回关</view>
			</template>
		</view>
		<!-- 标题 -->
		<view class="mt-1 mb-1" style="font-size: 30rpx" @click="openDetail">
			{{ item.title }}
		</view>
		<!-- 图片 -->
		<slot>
			<view class="" v-if="item.titlepic" @click="openDetail">
				<image :src="item.titlepic" style="width: 710rpx; height: 350rpx"></image>
			</view>
		</slot>

		<!-- 点赞等4个图像 -->
		<view class="flex align-center justify-around mt-1">
			<!-- 顶 -->
			<view class="img animated" hover-class="jello text-main" :class="item.supportVo.userSupportType === 1 ? 'active' : ''" @click="dosupport(1)">
				<text class="font iconfont icon-dianzan"></text>
				<view style="width: 20rpx" class="text-center">{{ item.supportVo.support === null ? '顶' : item.supportVo.support }}</view>
			</view>
			<!-- 踩 -->
			<view class="img animated" hover-class="jello text-main" :class="item.supportVo.userSupportType === 0 ? 'active' : ''" @click="dosupport(0)">
				<text class="font iconfont icon-buzan1"></text>
				<view style="width: 30rpx; text-align: center">{{ item.supportVo.unSupportCount === null ? '踩' : item.supportVo.unSupportCount }}</view>
			</view>

			<view class="img animated" hover-class="jello text-main" @click="openmsg">
				<text class="font iconfont icon-xiaoxi"></text>
				<text>{{ item.commentCount }}</text>
			</view>
			<view class="img animated" hover-class="jello text-main" @click="openshare">
				<text class="font iconfont icon-fenxiang"></text>
				<text>{{ item.sharenum }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import $T from '@/common/time.js';
import { addFollow, delFollow, support } from '@/request/Api/post.js';
export default {
	props: {
		isDetail: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		isSpace: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		item: {
			typr: Object,
			default() {
				return {};
			}
		},
		index: {
			type: Number
		},
		topindex: {
			type: Number
		},
		userId: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	filters: {
		timeformat(time) {
			return $T.gettime(time);
		}
	},
	methods: {
		openuserspace() {
			if (this.isSpace) {
				console.log(this.item)
				uni.setStorageSync('image', this.item.userpic);
				uni.navigateTo({
					url: '/pages/user-space/user-space?userId=' + this.item.userId + '&nikeName=' + this.item.nikeName + '&isFollow=' + this.item.isFollow
				});
			}
		},
		follow(num) {
			let w;
			//关注
			if (num === 0) {
				w = 1;
				addFollow({
					followId: this.item.userId
				}).then((res) => {
					this.emit(w);
				});
			}
			//取消关注
			if (num === 1) {
				w = 0;
				delFollow({
					followId: this.item.userId
				}).then((res) => {
					this.emit(w);
				});
			}
			//取消关注
			if (num === 2) {
				w = 3;
				delFollow({
					followId: this.item.userId
				}).then((res) => {
					this.emit(w);
				});
			}
			//关注
			if (num === 3) {
				w = 2;
				addFollow({
					followId: this.item.userId
				}).then((res) => {
					this.emit(w);
				});
			}
		},
		emit(w) {
			uni.$emit('followOrdosupport', {
				type: 'follow',
				userId: this.item.userId,
				num: w
			});
		},
		dosupport(num) {
			support({
				postId: this.item.id,
				type: num
			})
				.then((res) => {
					uni.$emit('followOrdosupport', {
						type: 'dosupport',
						num: num,
						id: this.item.id
					});
				})
				.catch((res) => {
					uni.showToast({
						title: '状态不佳，请稍后重试',
						icon: 'none'
					});
				});
		},
		openDetail() {
			if (this.isDetail) {
				const t = uni.getStorageSync('history');
				let list = [];
				if (t) {
					list = JSON.parse(t);
					const index = list.findIndex((v) => v.id === this.item.id);
					if (index!==-1) {
						list.splice(index, 1);
					}
				}
				list.push(this.item);
				uni.setStorageSync('history', JSON.stringify(list));
				uni.setStorageSync('DetailItem', this.item);
				uni.navigateTo({
					url: '/pages/postDetail/postDetail?index=' + this.index
				});
			}
		},
		openmsg() {
			if (this.isDetail) {
				uni.setStorageSync('DetailItem', this.item);
				return uni.navigateTo({
					url: '/pages/postDetail/postDetail'
				});
			}

			this.$emit('openmsg', this.item);
		},
		openshare() {
			if (this.isDetail) {
				uni.setStorageSync('DetailItem', this.item);
				return uni.navigateTo({
					url: '/pages/postDetail/postDetail'
				});
			}
			this.$emit('openshare', this.item);
		}
	}
};
</script>

<style>
.active {
	color: #ff4a6a;
}
</style>
